// class命名规则 
// 基类：relief
// 元素分类：
//      背景： bg // 不用考虑类型
//      元素： elem
// 主色：
//     灰：grey
//     红：red
//     绿：green
//     蓝：blue
//     紫：violet
// 色系：
//     浅色系：light
//     深色系：dark
// 类型：
//     平面：plane
//     凹面：concave
//     凸面：convex

// 调用：
// 基础背景、基础元素、色系+主色+类型
// .relief-bg .relief-elem .relief-light-grey-plane

// 基础
.relief-bg {

}
.relief-elem {
    margin: 10px; // 安全距离
    padding: 5px;
    position: relative;
    cursor: pointer;
    &::before {
        content: '';
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: inherit;
    }
}
// 基本数据-光源投影产生的偏移与扩散距离
@baseHShadow: 4px;
@baseVShadow: 6px; 
@baseBlur: 6px;
@baseSpread: 1px;
// 凹面配置
@baseConcaveHShadow: 2px; 
@baseConcaveVShadow: 2px;
@baseConcaveBlur: 4px;
@baseConcaveSpread: 0px;
// 凸面配置
@baseConvexHShadow: 10px; 
@baseConvexVShadow: 10px;

// 灰度-浅色系
@lightGreyBg: rgb(248, 248, 248);
@lightGreyShadow: rgb(225, 225, 225);
@lightGreyShadowConvex: rgb(235, 235, 235);
@lightGreyHightLightConvex: rgb(255, 255, 255);
@lightGreyHightLight: rgb(255, 255, 255);
.relief-bg-grey-light {
    background: @lightGreyBg;
}
.relief-grey-light-plane {
    background: @lightGreyBg;
    box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreyHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreyShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreyShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreyHightLight;
}
.relief-grey-light-concave {
    background: @lightGreyBg;
    box-shadow: @baseConcaveHShadow @baseConcaveVShadow @baseConcaveBlur @baseConcaveSpread @lightGreyShadow inset;
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreyHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreyShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreyShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreyHightLight;
    }
}
.relief-grey-light-convex {
    background: radial-gradient(farthest-side at @baseConvexHShadow @baseConvexVShadow, @lightGreyHightLightConvex, @lightGreyShadowConvex);
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreyHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreyShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreyShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreyHightLight;
    }
}

// 灰度-深色系
@darkGreyBg: rgb(40, 40, 40);
@darkGreyShadow: rgb(24, 24, 24);
@darkGreyShadowConvex: rgb(34, 34, 34);
@darkGreyHightLightConvex: rgb(65, 65, 65);
@darkGreyHightLight: rgb(51, 51, 51);
.relief-bg-grey-dark {
    background: @darkGreyBg;
}
.relief-grey-dark-plane {
    background: @darkGreyBg;
    box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreyHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreyShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreyShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreyHightLight;
}
.relief-grey-dark-concave {
    background: @darkGreyBg;
    box-shadow: @baseConcaveHShadow @baseConcaveVShadow @baseConcaveBlur @baseConcaveSpread @darkGreyShadow inset;
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreyHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreyShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreyShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreyHightLight;
    }
}
.relief-grey-dark-convex {
    background: radial-gradient(farthest-side at @baseConvexHShadow @baseConvexVShadow, @darkGreyHightLightConvex, @darkGreyShadowConvex);
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreyHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreyShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreyShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreyHightLight;
    }
}
// 红色-浅色系
@lightRedBg: rgb(255, 238, 238);
@lightRedShadow: rgb(230, 197, 197);
@lightRedShadowConvex: rgb(241, 219, 219);
@lightRedHightLightConvex: rgb(255, 255, 255);
@lightRedHightLight: rgb(255, 246, 246);
.relief-bg-red-light {
    background: @lightRedBg;
}
.relief-red-light-plane {
    background: @lightRedBg;
    box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightRedHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightRedShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightRedShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightRedHightLight;
}
.relief-red-light-concave {
    background: @lightRedBg;
    box-shadow: @baseConcaveHShadow @baseConcaveVShadow @baseConcaveBlur @baseConcaveSpread @lightRedShadow inset;
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightRedHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightRedShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightRedShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightRedHightLight;
    }
}
.relief-red-light-convex {
    background: radial-gradient(farthest-side at @baseConvexHShadow @baseConvexVShadow, @lightRedHightLightConvex, @lightRedShadowConvex);
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightRedHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightRedShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightRedShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightRedHightLight;
    }
}

// 红色-深色系
@darkRedBg: rgb(58, 0, 0);
@darkRedShadow: rgb(34, 0, 0);
@darkRedShadowConvex: rgb(65, 0, 0);
@darkRedHightLightConvex: rgb(119, 0, 0);
@darkRedHightLight: rgb(85, 0, 0);
.relief-bg-red-dark {
    background: @darkRedBg;
}
.relief-red-dark-plane {
    background: @darkRedBg;
    box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkRedHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkRedShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkRedShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkRedHightLight;
}
.relief-red-dark-concave {
    background: @darkRedBg;
    box-shadow: @baseConcaveHShadow @baseConcaveVShadow @baseConcaveBlur @baseConcaveSpread @darkRedShadow inset;
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkRedHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkRedShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkRedShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkRedHightLight;
    }
}
.relief-red-dark-convex {
    background: radial-gradient(farthest-side at @baseConvexHShadow @baseConvexVShadow, @darkRedHightLightConvex, @darkRedShadowConvex);
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkRedHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkRedShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkRedShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkRedHightLight;
    }
}
// 绿色-浅色系
@lightGreenBg: rgb(217, 255, 217);
@lightGreenShadow: rgb(193, 236, 193);
@lightGreenShadowConvex: rgb(218, 253, 218);
@lightGreenHightLightConvex: rgb(255, 255, 255);
@lightGreenHightLight: rgb(230, 255, 230);
.relief-bg-green-light {
    background: @lightGreenBg;
}
.relief-green-light-plane {
    background: @lightGreenBg;
    box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreenHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreenShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreenShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreenHightLight;
}
.relief-green-light-concave {
    background: @lightGreenBg;
    box-shadow: @baseConcaveHShadow @baseConcaveVShadow @baseConcaveBlur @baseConcaveSpread @lightGreenShadow inset;
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreenHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreenShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreenShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreenHightLight;
    }
}
.relief-green-light-convex {
    background: radial-gradient(farthest-side at @baseConvexHShadow @baseConvexVShadow, @lightGreenHightLightConvex, @lightGreenShadowConvex);
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreenHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreenShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightGreenShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightGreenHightLight;
    }
}

// 绿色-深色系
@darkGreenBg: rgb(0, 60, 0);
@darkGreenShadow: rgb(0, 30, 0);
@darkGreenShadowConvex: rgb(0, 40, 0);
@darkGreenHightLightConvex: rgb(0, 90, 0);
@darkGreenHightLight: rgb(0, 70, 0);
.relief-bg-green-dark {
    background: @darkGreenBg;
}
.relief-green-dark-plane {
    background: @darkGreenBg;
    box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreenHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreenShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreenShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreenHightLight;
}
.relief-green-dark-concave {
    background: @darkGreenBg;
    box-shadow: @baseConcaveHShadow @baseConcaveVShadow @baseConcaveBlur @baseConcaveSpread @darkGreenShadow inset;
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreenHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreenShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreenShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreenHightLight;
    }
}
.relief-green-dark-convex {
    background: radial-gradient(farthest-side at @baseConvexHShadow @baseConvexVShadow, @darkGreenHightLightConvex, @darkGreenShadowConvex);
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreenHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreenShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkGreenShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkGreenHightLight;
    }
}
// 自定义色-浅色系
@lightBlueBg: rgb(236, 236, 255);
@lightBlueShadow: rgb(193, 193, 243);
@lightBlueShadowConvex: rgb(219, 219, 248);
@lightBlueHightLightConvex: rgb(255, 255, 255);
@lightBlueHightLight: rgb(243, 243, 255);
.relief-bg-blue-light {
    background: @lightBlueBg;
}
.relief-blue-light-plane {
    background: @lightBlueBg;
    box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightBlueHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightBlueShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightBlueShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightBlueHightLight;
}
.relief-blue-light-concave {
    background: @lightBlueBg;
    box-shadow: @baseConcaveHShadow @baseConcaveVShadow @baseConcaveBlur @baseConcaveSpread @lightBlueShadow inset;
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightBlueHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightBlueShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightBlueShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightBlueHightLight;
    }
}
.relief-blue-light-convex {
    background: radial-gradient(farthest-side at @baseConvexHShadow @baseConvexVShadow, @lightBlueHightLightConvex, @lightBlueShadowConvex);
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightBlueHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightBlueShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightBlueShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightBlueHightLight;
    }
}

// 蓝色-深色系
@darkBlueBg: rgb(0, 0, 85);
@darkBlueShadow: rgb(0, 0, 25);
@darkBlueShadowConvex: rgb(0, 0, 50);
@darkBlueHightLightConvex: rgb(0, 0, 200);
@darkBlueHightLight: rgb(0, 0, 120);
.relief-bg-blue-dark {
    background: @darkBlueBg;
}
.relief-blue-dark-plane {
    background: @darkBlueBg;
    box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkBlueHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkBlueShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkBlueShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkBlueHightLight;
}
.relief-blue-dark-concave {
    background: @darkBlueBg;
    box-shadow: @baseConcaveHShadow @baseConcaveVShadow @baseConcaveBlur @baseConcaveSpread @darkBlueShadow inset;
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkBlueHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkBlueShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkBlueShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkBlueHightLight;
    }
}
.relief-blue-dark-convex {
    background: radial-gradient(farthest-side at @baseConvexHShadow @baseConvexVShadow, @darkBlueHightLightConvex, @darkBlueShadowConvex);
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkBlueHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkBlueShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkBlueShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkBlueHightLight;
    }
}
// 自定义色-浅色系
@lightDIYBg: rgb(252, 232, 255);
@lightDIYShadow: rgb(230, 202, 235);
@lightDIYShadowConvex: rgb(245, 224, 248);
@lightDIYHightLightConvex: rgb(255, 255, 255);
@lightDIYHightLight: rgb(253, 239, 255);
.relief-bg-DIY-light {
    background: @lightDIYBg;
}
.relief-DIY-light-plane {
    background: @lightDIYBg;
    box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightDIYHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightDIYShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightDIYShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightDIYHightLight;
}
.relief-DIY-light-concave {
    background: @lightDIYBg;
    box-shadow: @baseConcaveHShadow @baseConcaveVShadow @baseConcaveBlur @baseConcaveSpread @lightDIYShadow inset;
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightDIYHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightDIYShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightDIYShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightDIYHightLight;
    }
}
.relief-DIY-light-convex {
    background: radial-gradient(farthest-side at @baseConvexHShadow @baseConvexVShadow, @lightDIYHightLightConvex, @lightDIYShadowConvex);
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightDIYHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightDIYShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @lightDIYShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @lightDIYHightLight;
    }
}

// 自定义色-深色系
@darkDIYBg: rgb(63, 0, 75);
@darkDIYShadow: rgb(34, 0, 41);
@darkDIYShadowConvex: rgb(47, 0, 38);
@darkDIYHightLightConvex: rgb(103, 0, 123);
@darkDIYHightLight: rgb(80, 0, 96);
.relief-bg-DIY-dark {
    background: @darkDIYBg;
}
.relief-DIY-dark-plane {
    background: @darkDIYBg;
    box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkDIYHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkDIYShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkDIYShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkDIYHightLight;
}
.relief-DIY-dark-concave {
    background: @darkDIYBg;
    box-shadow: @baseConcaveHShadow @baseConcaveVShadow @baseConcaveBlur @baseConcaveSpread @darkDIYShadow inset;
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkDIYHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkDIYShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkDIYShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkDIYHightLight;
    }
}
.relief-DIY-dark-convex {
    background: radial-gradient(farthest-side at @baseConvexHShadow @baseConvexVShadow, @darkDIYHightLightConvex, @darkDIYShadowConvex);
    &::before {
        box-shadow:
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkDIYHightLight,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkDIYShadow,
        @baseHShadow @baseVShadow @baseBlur @baseSpread @darkDIYShadow,
        -@baseHShadow -@baseVShadow @baseBlur @baseSpread @darkDIYHightLight;
    }
}